<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data1 = google.visualization.arrayToDataTable([
        ['시간', '오늘', '어제', '전주'],
        <c:forEach items="${actionStatsByHour.datas}" var="item" varStatus="status">
        ['${item.step}', ${item.clickCount[0]}, ${item.clickCount[1]}, ${item.clickCount[2]}]<c:if test="${!status.last}">,</c:if> 
        </c:forEach>
      ]);
      
      
      var data2 = google.visualization.arrayToDataTable([
        ['시간', '오늘', '어제', '전주'],
        <c:forEach items="${actionStatsByHour.datas}" var="item" varStatus="status">
        ['${item.step}', ${item.clickUserCount[0]}, ${item.clickUserCount[1]}, ${item.clickUserCount[2]}]<c:if test="${!status.last}">,</c:if> 
        </c:forEach>
      ]);

      var data3 = google.visualization.arrayToDataTable([
        ['날짜', '클릭 수'],
        <c:forEach items="${actionStatsByDay.datas}" var="item" varStatus="status">
        ['${item.step}', ${item.clickCount[0]}]<c:if test="${!status.last}">,</c:if> 
        </c:forEach>
      ]);
      
      var data4 = google.visualization.arrayToDataTable([
        ['날짜', '클릭 사용자 수'],
        <c:forEach items="${actionStatsByDay.datas}" var="item" varStatus="status">
        ['${item.step}', ${item.clickUserCount[0]}]<c:if test="${!status.last}">,</c:if> 
        </c:forEach>
      ]);
      
      

      var options1 = {
        title: '클릭 수'
      };

      var options2 = {
        title: '클릭 사용자 수'
      };

      var options3 = {
        title: '클릭 수'
      };

      var options4 = {
        title: '클릭 사용자 수'
      };

      var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1'));
      chart1.draw(data1, options1);

      var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2'));
      chart2.draw(data2, options2);

      var chart3 = new google.visualization.LineChart(document.getElementById('chart_div3'));
      chart3.draw(data3, options3);

      var chart4 = new google.visualization.LineChart(document.getElementById('chart_div4'));
      chart4.draw(data4, options4);
    }
    </script>

   	<c:forEach items="${actionStatsByDay.datas}" var="item" varStatus="status">
   		<c:if test="${status.last}">
			<table class="table table-striped">
				<tr>
					<th colspan="5">오늘 (${item.step})</th>
				</tr>
				<tr>
					<th style="width:100px;">클릭 사용자 수</th>
					<td style="width:100px;">${item.clickUserCount}</td>
					<th style="width:100px;">클릭 수</th>
					<td>${item.clickCount}<td>
				</tr>
			</table>
   		</c:if>
   	</c:forEach>

    <div id="chart_div3"></div><br/>
    <div id="chart_div4"></div><br/>
    <div id="chart_div1"></div><br/>
    <div id="chart_div2"></div><br/>
